import React, { Component } from 'react';
import { Table, message, Button, Modal, Form, DatePicker, Select, Input, InputNumber } from 'antd';
import axios from 'axios';
import { GET_ALLYOUHUIQUAN, GET_ADDYOUHUIQUAN, POST_CHANGEYOUHUIQUAN } from '../../utils/api'
class Youhuiquanguanli extends Component {
    formRef = React.createRef();
    changeformRef = React.createRef();
    state = {
        data: [],
        setVisible: false,
        changeVisible: false,
        rowData: []
    }
    // 获取数据
    getData() {
        axios({
            url: GET_ALLYOUHUIQUAN,
            method: 'get',
            params: {}
        }).then(data => {
            this.setState({
                data: data.data.data
            })
        })
    }
    xiugai = (row) => () => {

        // 时间转换成毫秒数进行比较
        let nowTime = new Date().getTime()
        let startTime = new Date(row.start_time).getTime()

        if (nowTime > startTime) {
            message.error('不能修改该数据~', 5);
        } else {
            this.setState({
                rowData: row,
                changeVisible: true,
            })
        }

    }
    // add显示弹框
    showModal = () => {
        this.setState({
            setVisible: true
        })
    };
    handleCancel = () => {
        this.setState({
            setVisible: false
        })
        this.formRef.current.resetFields();
    };
    ChangeCancel = () => {
        this.setState({
            changeVisible: false
        })
        this.changeformRef.current.resetFields();
    };
    // 时间转换
    ChangeTime(d) {
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    }
    onFinish = values => {
        // console.log(values);
        this.setState({
            setVisible: false
        })
        axios({
            url: GET_ADDYOUHUIQUAN,
            method: 'post',
            data: {
                // 使用范围  管理员
                coupons_use_area_id: '1',
                // 优惠卷名称
                coupons_name: values.coupons_name,
                // 优惠卷副标题
                coupons_subtitle: values.coupons_subtitle,
                // 优惠卷类型id
                coupons_type_id: values.coupons_type_id,
                //满多少
                coupons_available_price: values.coupons_available_price,
                //减多少
                coupons_reduction_price: values.coupons_reduction_price,
                // 优惠卷发放数量
                coupons_number: values.coupons_number,
                // 使用说明
                coupons_instructions: values.coupons_instructions,
                // 用户类型id
                user_type_id: values.user_type_id,
                // 优惠卷限领数量
                coupons_limit_number: values.coupons_limit_number,
                start_time: this.ChangeTime(values.start_time._d),
                end_time: this.ChangeTime(values.end_time._d),
                // 领取后有效时间
                valid_time: values.valid_time
            }
        }).then(data => {
            if (data.data.code === 200) {
                message.success('添加成功~', 2);
                this.getData()
            } else {
                message.error('添加失败！', 2);
            }
        })
        this.formRef.current.resetFields();
    };
    onchangeFinish = values => {
        axios({
            url: POST_CHANGEYOUHUIQUAN,
            method: 'post',
            data: {
                coupons_id: values.id,
                // 优惠卷名称
                coupons_name: values.name,
                // 优惠卷副标题
                coupons_subtitle: values.subtitle,
                // 优惠卷类型id
                coupons_type_id: values.type,
                //满多少
                coupons_available_price: values.man,
                //减多少
                coupons_reduction_price: values.jian,
                // 优惠卷发放数量
                coupons_number: values.faNum,
                // 使用说明
                coupons_instructions: values.shuoming,
            }
        }).then(data => {
            // console.log(data)
            if (data.data.code === 200) {
                message.success('修改成功~', 2);
                this.getData()
            } else {
                message.error('修改失败！', 2);
            }
        })
        this.setState({
            changeVisible: false
        })
        this.changeformRef.current.resetFields();
    };

    componentDidMount() {
        this.getData()
    }
    // componentWillReceiveProps(nextProps, nextContext) {
    //     this.setState({
    //         tableData:nextProps.tableData
    //     })
    // }
    // 数据双向绑定
    handleChange = (name, val) => {
        // 更新状态
        this.setState({
            [name]: val //不是属性，是属性的值[name]
        })
    }
    userChange = (name) => {
        return (e) => this.handleChange(name, e.target.value)
    }
    render() {
        const tableData = this.state.data
        const rowData = this.state.rowData
        const columns = [
            {
                title: '优惠卷类型',
                dataIndex: 'coupons_type_name',
                key: 'coupons_type_name',
                filters: [
                    { text: '满减券', value: '满减' },
                    { text: '立减券', value: '立减' },
                    { text: '折扣券', value: '折扣' },
                ],
                onFilter: (value, record) => record.coupons_type_name.includes(value),

            },
            {
                title: '优惠卷名称',
                dataIndex: 'coupons_name',
                key: 'coupons_name',
            },
            {
                title: '优惠卷发放数量',
                dataIndex: 'coupons_number',
                key: 'coupons_number',
                sorter: (a, b) => a.coupons_number - b.coupons_number,
            },
            {
                title: '优惠卷限领数量',
                dataIndex: 'coupons_limit_number',
                key: 'coupons_limit_number',
                sorter: (a, b) => a.coupons_limit_number - b.coupons_limit_number,
            },
            {
                title: '优惠卷使用说明',
                dataIndex: 'coupons_instructions',
                key: 'coupons_instructions',
            },
            {
                title: '优惠卷有效期起始时间',
                dataIndex: 'start_time',
                key: 'start_time',
            },
            {
                title: '优惠卷有限期结束时间',
                dataIndex: 'end_time',
                key: 'end_time',
            },
            {
                title: '操作',
                width: '100px',
                align: 'center',
                render: (row) =>
                    <div>
                        {/* <Button style={{ marginRight: '10px' }} danger>删除</Button> */}
                        <Button type='primary' onClick={this.xiugai(row)}>修改</Button>
                    </div>
            }
        ];
        return (

            <div>
                <Button style={{ margin: '20px' }} type="primary" onClick={this.showModal}> 新增优惠券</Button>
                {/* add弹框 */}
                <Modal
                    title="新增优惠券"
                    width={800}
                    visible={this.state.setVisible}
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                    footer={
                        [] // 设置footer为空，去掉 取消 确定默认按钮
                    }
                >
                    <Form
                        ref={this.formRef}
                        labelCol={{ span: 6 }}
                        onFinish={this.onFinish}
                        // 设置初始值：    name：值
                        initialValues={{ coupons_type_id: '1', user_type_id: '1', coupons_limit_number: '1' }}
                    >
                        <p>基本信息</p>
                        <Form.Item name='coupons_name' label="优惠券名称：" rules={[{ required: true, message: '请输入优惠券名称' }]}>
                            <Input placeholder="同程优品10元券" />
                        </Form.Item>
                        <Form.Item name='coupons_subtitle' label="优惠券副标题：" rules={[{ required: true, message: '请输入优惠券副标题' }]}>
                            <Input placeholder="10元券" />
                        </Form.Item>
                        <Form.Item name='coupons_type_id' label="优惠类型：" rules={[{ required: true, message: '至少选择一种类型' }]}>
                            <Select>
                                <Select.Option value="1">满减券</Select.Option>
                                <Select.Option value="2">立减券</Select.Option>
                                <Select.Option value="3">折扣券</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='coupons_available_price' label="满：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='coupons_reduction_price' label="减：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='coupons_number' label="发放数量：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='coupons_instructions' label="使用说明：" rules={[{ required: true, message: '请输入使用说明' }]}>
                            <Input.TextArea />
                        </Form.Item>
                        <p>基本规则</p>
                        <Form.Item name='user_type_id' label="用户类型：">
                            <Select>
                                <Select.Option value="1">新用户</Select.Option>
                                <Select.Option value="2">老用户</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='coupons_limit_number' label="每人限领数量:">
                            <InputNumber min={1} max={3} />
                        </Form.Item>
                        <Form.Item name='start_time' label="有效期：">
                            <DatePicker placeholder='起始时间' />
                        </Form.Item>
                        <Form.Item name='end_time' label="至">
                            <DatePicker placeholder='结束时间' />
                        </Form.Item>
                        <Form.Item name='valid_time' label="有效天数：">
                            <Input />
                        </Form.Item>
                        <Button type="primary" htmlType="submit">保存 </Button>
                        <Button type="primary" onClick={this.handleCancel}>取消 </Button>
                    </Form>
                </Modal>
                {/* 修改弹框 */}
                <Modal
                    title="修改优惠券"
                    width={800}
                    visible={this.state.changeVisible}
                    onCancel={this.ChangeCancel}
                    destroyOnClose={true}
                    footer={
                        [] // 设置footer为空，去掉 取消 确定默认按钮
                    }
                >
                    <Form
                        ref={this.changeformRef}
                        labelCol={{ span: 6 }}
                        onFinish={this.onchangeFinish}
                        // 设置初始值：    name：值
                        initialValues={{
                            id: rowData.coupons_id,
                            type: rowData.coupons_type_id,
                            name: rowData.coupons_name,
                            subtitle: rowData.coupons_subtitle,
                            faNum: rowData.coupons_number,
                            shuoming: rowData.coupons_instructions,
                            man: rowData.coupons_available_price,
                            jian: rowData.coupons_reduction_price,
                        }}
                    >
                        <Form.Item name='type' label="优惠券类型：">
                            <Input disabled />
                        </Form.Item>
                        <Form.Item name='id' label="优惠券id：" style={{ display: 'none' }}>
                            <Input disabled />
                        </Form.Item>
                        <Form.Item name='name' label="优惠券名称：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='subtitle' label="优惠券副标题：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='faNum' label="优惠券发放数量：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='shuoming' label="优惠券说明：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='man' label="满：">
                            <Input />
                        </Form.Item>
                        <Form.Item name='jian' label="减：">
                            <Input />
                        </Form.Item>
                        <Button type="primary" htmlType="submit">保存 </Button>
                        <Button type="primary" onClick={this.ChangeCancel}>取消 </Button>
                    </Form>
                </Modal>

                {/* 表格 */}
                <Table
                    pagination={{ position: ['bottomCenter'], pageSize: 6 }}
                    columns={columns}
                    dataSource={tableData}
                    rowKey={(record) => `complete${record.coupons_id}`}
                />
            </div>
        );
    }
}

export default Youhuiquanguanli;